<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">服务登记</block>
		</cu-custom>

		<view class="cu-modal" :class="modalName == 'DialogModal2' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">温馨提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="">
					<view class="">
						<view class="radius shadow shadow-lg bg-white det_topsss">
							<view class="detail-left detail-inner" style="padding: 0 30rpx">
								服务项目与服务对象不匹配，请确认以后再提交
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end" style="padding: 30rpx 0">
					<view class="action">
						<button class="cu-btn line-blue text-green" @tap="hideModal('DialogModal2')">
							取消
						</button>
						<!-- <button class="cu-btn bg-blue margin-left" @tap="hideModal">提交</button> -->
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName == 'DialogModal1' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">确认登记</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="">
					<view class="">
						<view class="radius shadow shadow-lg bg-white det_topsss">
							<view class="det_topsss_inner"> </view>
							<view class="detail-right detail-inner det_topsss_right">
								<view>服务对象</view>
								<view class="detail-content">
									{{ showItem.preName }}:{{ showItem.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end" style="padding: 30rpx 0">
					<view class="action">
						<button class="cu-btn line-blue text-green" @tap="hideModal('DialogModal1')">
							取消
						</button>
						<button class="cu-btn bg-blue margin-left" @tap="realSubmit(data)">
							提交
						</button>
					</view>
				</view>
			</view>
		</view>

		<view class="padding-sm">
			<view class="radius  padding-sm  bg-white det_top">
				<view class="detail">
					<view class="detail-img">
						<image src="../../../static/img/basics/u129.png" mode=""></image>
					</view>
					<view class="detail-right">
						<text class="left">{{ item.oldManName }}</text>
						<text class="right">{{ item.age }}岁</text>
					</view>
				</view>
				<view class="service">
					<view class="left">服务项目:</view>
					<view class="right">
						<text v-for="(item, index) in data" :key="index">
							<text v-if="index != data.length - 1">
								{{ item.serviceItemName }},
							</text>
							<text v-else>
								{{ item.serviceItemName }}
							</text>
						</text>
					</view>
				</view>
			</view>
		</view>
	<view class="padding-sm">
				<view class="radius  padding-sm  bg-white det_top">
					<view v-if="data.length != 0">
						<view v-for="(item, index) in data" :key="index" class="register-item">
							<view class="goods-title">
								{{ item.serviceItemName }}
							</view>
							<view class="goods" v-if="item.useItem">
							  <label @click="changeValue(index,item)">
							    <checkbox
							      style="transform: scale(0.7)"
							      class="blue"
							      :class="item.checked ? 'checked' : ''"
							      :checked="item.checked"
							    /><text>需要使用物品</text>
							  </label>
							  <block v-if="item.checked">
							    <input
							      placeholder="物品名称"
							      class="left"
							      v-model="item.useItem"
							      type="text"
							    />
							    <input
							      placeholder="数量"
							      class="right"
							      v-model="item.useNum"
							      type="number"
							      v-if="item.useNum != undefined"
							    />
							    <input
							      placeholder="数量"
							      class="right"
							      v-model="item.useNum"
							      type="number"
							      v-if="item.useNum == undefined"
							    />
							    <text>件</text>
							  </block>
							</view>
							<!-- 单选多选 -->
							<view
							  v-if="item.customItem.length != 0"
							  v-for="(it, indexs) in item.customItem"
							  :key="indexs"
							>
							  <view class="assist" v-if="it.classify == '单选'">
							    <view class="inner" @click="readName(it.title)">{{ it.title }}：</view>
							    <radio-group name="" class="inner-right">
							      <view
							        class="right"
							        v-for="(radio, radioIndex) in it.option"
							        :key="radioIndex"
							      >
							        <label>
							          <radio
							            style="transform: scale(0.7)"
							            v-model="it.value"
							            :checked="it.value == radio ? true : false"
							          /><text @click="readName(radio)">{{ radio }}</text>
							        </label>
							      </view>
							    </radio-group>
							  </view>
							  <view class="assist" v-if="it.classify == '多选'">
							    <view class="inner" @click="readName(it.title)">{{ it.title }}：</view>
							    <view
							      class="right"
							      v-for="(radio, radioIndex) in it.value"
							      :key="radioIndex"
							    >
							      <label @click="radio.checked = !radio.checked" class="inner-right">
							        <checkbox
							          class="blue"
							          style="transform: scale(0.7)"
							          :class="radio.checked ? 'checked' : ''"
							          :checked="radio.checked ? true : false"
							          v-model="radio.value"
							        /><text @click="readName(radio.label)">{{ radio.label }}</text>
							      </label>
							    </view>
							  </view>
							  <view
							    class="textarea"
							    v-if="it.classify == '文字输入'"
							    style="display: flex"
							  >
							    <view class="inner"  @click="readName(it.title)">{{ it.title }}：</view>
							    <textarea v-model="it.value" placeholder="请输入文字" class="textarea-inner"/>
							  </view>
							</view>
	
					
					
	            <!-- 备注 -->
	            <view style="margin-top: 12rpx" @click="readRemark">
	              <view class="radius shadow-lg bg-white det_top notes_outer">
	                <view class="left"> 登记备注: </view>
	                <view class="notes">
	                  <input
	                    type="text"
	                    v-model="item.recordRemark"
	                    placeholder="请输入服务登记备注内容"
	                    placeholder-style="font-size:28rpx"
	                  />
	                </view>
	              </view>
	            </view>
	          </view>
	        </view>
	    
		
		  </view>
	    </view>
		<view class="success" @click="saoma">
		  <view class="success-left">
		    <image src="../../../static/img/u35.png" mode=""></image>
		  </view>
		  <view class="success-right">
		    您可以将手机背面的NFC的扫描区域靠近位于区域的识别卡完成服务登记操作
		  </view>
		</view>
	    <!-- 	<view>
					<button type="primary" @click="realSubmit(data)">提交</button>
				</view> -->
	  </view>
	</template>

<script>
export default {
  data() {
    return {
      modalName: "",
      shit: false,
      value: true,
      isUseo: true,
      isUset: false,
      fsfzList: [
        {
          name: "三交枕",
          checked: true,
        },
        {
          name: "腰枕",
          checked: false,
        },
        {
          name: "皮肤异常",
          checked: false,
        },
      ],
      fszsList: [
        {
          name: "左侧",
          checked: false,
        },
        {
          name: "右侧",
          checked: false,
        },
        {
          name: "平卧",
          checked: false,
        },
      ],
      data: [],
      item: {},
      customList: [],
      serviceTarget: "",
      showItem: {},
      timeRange: "",
    };
  },
  onShow() {},
  onLoad(options) {
    this.serviceTarget = 0;
    this.data = JSON.parse(options.data);
    console.log(this.data, 999);
    this.item = JSON.parse(options.item);
    const that = this;
    uni.$on("NFC_READ", function (msg) {
      that.readCard(msg.rfid);
    });
  },
  onUnload() {
    // 移除监听事件
    uni.$off("NFC_READ");
  },
  onHide() {},
  methods: {
	  readName(name){
	  		  if(this.$store.state.state&&this.$store.state.isphone){
	  		  	getApp().globalData.TTSSpeaker.stop();
	  		  	getApp().globalData.TTSSpeaker.speak(name,1);
	  		  }	
	  },
	  readRemark(){
	  		if(this.$store.state.state&&this.$store.state.isphone){
	  			getApp().globalData.TTSSpeaker.stop();
	  			getApp().globalData.TTSSpeaker.speak('登记备注',1);
	  		}	 
	  },
	 oldName(name){
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak(name,1);
		}	 
	 },
    changeValue(index) {
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak('需要使用物品',1);
		}	
      this.data[index].checked = !this.data[index].checked;
      if (!this.data[index].checked) {
        this.data[index].useItem = "";
        this.data[index].useNum = "";
      }
    },
    // 弹框
    showModal(item) {
      this.modalName = item;
      if (item == "DialogModal1") {
      } else if (item == "DialogModal2") {
      }
    },
    hideModal(e) {
      this.modalName = null;
    },
	saoma(){
		 if(this.$store.state.state&&this.$store.state.isphone){
		 	getApp().globalData.TTSSpeaker.stop();
		 	getApp().globalData.TTSSpeaker.speak(' 您可以将手机背面的NFC的扫描区域靠近位于区域的识别卡完成服务登记操作',1);
		 }	
	 },
    readCard(id) {
      // console.log(id,'99999')
      this.$http(
        "/implement-service/implement/getByRfidCardIdForService",
        "get",
        {
          rfidCardId: id,
        }
      ).then((res) => {
        console.log(res, "88888");
        if (res.data.code == 200) {
          // 數據
          let data = res.data.data;
          /* 人*/
          this.showItem = res.data.data.serviceObject;
          this.item.areaSiteId = res.data.data.serviceObject.id;
          if (data == undefined) {
            uni.showToast({
              icon: "none",
              title: "这是个空标签",
            });
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('这是个空标签',1);
			}
          } else if (data.serviceTarget == this.serviceTarget) {
            this.showItem = res.data.data.serviceObject;
            this.item.areaSiteId = this.showItem.id;
            this.timeRange = this.showItem.timeRange;
			this.realSubmit(this.data);
          } else if (data.serviceTarget != this.serviceTarget) {
            // this.showModal("DialogModal2");
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('服务项目与服务对象不匹配',1);
			}
			uni.showToast({
			    title: '服务项目与服务对象不匹配',
				icon:'none',
			    duration: 1500,
			});
          }
        }
      });
    },
    // /oldServiceRecord/save
    // 保存
    oldServiceRecord() {
      let param = {};
      param.teamId = uni.getStorageSync();
      this.$http("/care-service/oldServiceRecord/save", "get", param).then(
        (res) => {
          if (res.data.code == 200) {
          }
        }
      );
    },
    realSubmit(data) {
      let param = {};
      param.oldServiceRecordQueryList = [];
      let teamId = uni.getStorageSync("teamId");
      for (let item = 0; item < data.length; item++) {
        data[item].customItem = JSON.stringify(data[item].customItem);
        // customItem  serviceItemId: "202011020000058"
        param.oldServiceRecordQueryList[item] = {};
        param.oldServiceRecordQueryList[item].customItem =
          data[item].customItem;
        param.oldServiceRecordQueryList[item].employeeId =
          data[item].employeeId;
        param.oldServiceRecordQueryList[item].oldBaseId = this.item.oldBaseId;
        param.oldServiceRecordQueryList[item].recordRemark =
          data[item].recordRemark;
        param.oldServiceRecordQueryList[item].serviceCycle =
          data[item].serviceCycle;
        param.oldServiceRecordQueryList[item].serviceItemId =
          data[item].serviceItemId;
        param.oldServiceRecordQueryList[item].teamId = teamId;
        param.oldServiceRecordQueryList[item].timeRange = data[item].timeRange;
        param.oldServiceRecordQueryList[item].useItem = data[item].useItem;
        if (data[item].useNum == undefined) {
          param.oldServiceRecordQueryList[item].useNum = 0;
        } else {
          param.oldServiceRecordQueryList[item].useNum = data[item].useNum;
        }
      }
      this.$http("/care-service/oldServiceRecord/save", "post", param).then(
        (res) => {
			if (res.data.code == 200) {
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak('刷卡提交成功',1);
				}
         		uni.showToast({
         		    title: '刷卡提交成功',
         			icon:'none',
         		    duration: 1500,
         		});
         		setTimeout(function(){
         			uni.switchTab({
         			    url: '/pages/basics/index'
         			});
         		},1500)
			}else {
			this.hideModal("DialogModal1");
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('提交失败',1);
			}else{
           		uni.showToast({
				title: "提交失败",
           		  duration: 2000,
           			icon:'none'
           		 });
           }	
         }
        }
      );
    },
    submit() {
      console.log(this.data);
    },
    changeRadio(item, index, indexs) {
      this.data[index].customItem[indexs].value = item;
    },
  },
};
</script>

<style scoped lang="scss">
.register-item {
  padding-bottom: 20rpx;
  padding-top: 20rpx;
}
.cu-tag {
  height: 36rpx;
  margin: 0 15rpx;
}
page {
  background-color: #f2f2f2;
}

.detail {
  display: flex;
  .detail-img {
    width: 140rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
}

.detail-right {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-left: 40rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #cccccc;
  .left {
    flex: 1;
    margin-right: 20rpx;
    font-size: 34rpx;
  }
  .right {
    flex: 1;
  }
}
.service {
  padding: 20rpx;
  display: flex;
  .left {
    flex: 1;
    margin-right: 20rpx;
    text-align: center;
  }
  .right {
    flex: 3;
  }
}
.goods {
  display: flex;
}
.goods {
  .left {
    width: 200rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    padding: 0 20rpx;
    background-color: #f2f2f2;
    margin: 0 30rpx;
    border-radius: 15rpx;
  }
  .right {
    width: 70rpx;
    height: 30rpx;
    border-radius: 15rpx;
    line-height: 30rpx;
    padding: 0 20rpx;
    text-align: center;
    background-color: #f2f2f2;
    margin-right: 12rpx;
  }
}
.assist {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .inner{
  }
  .right {
    flex: 1;
  }
  .inner-right{
		flex: 1;
		display: flex;
		 align-items: center;
	}
}
.trun-position {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .right {
    flex: 1;
    text-align: left;
  }
}
.dengji {
  font-size: 34rpx;
  margin-bottom: 12rpx;
}
.notes_outer {
  display: flex;
  align-items: center;
  .left {
    margin-right: 30rpx;
  }
  .notes {
    border: 2rpx solid #aaaaaa;
    height: 70rpx;
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    input {
      width: 100%;
      box-sizing: border-box;
      padding: 0 10rpx;
      line-height: 70rpx;
    }
  }
}

.goods {
  display: flex;
}
.goods {
  .left {
    width: 200rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    padding: 0 20rpx;
    background-color: #f2f2f2;
    margin: 0 30rpx;
    border-radius: 15rpx;
  }
  .right {
    width: 100rpx;
    height: 30rpx;
    border-radius: 15rpx;
    line-height: 30rpx;
    padding: 0 20rpx;
    text-align: center;
    background-color: #f2f2f2;
    margin-right: 12rpx;
  }
}
.goods-title {
  margin-bottom: 12rpx;
  font-size: 34rpx;
  color: #333333;
}
.textarea {
  margin-top: 12rpx;
  textarea {
    border: 1rpx solid #cccccc;
    padding: 20rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }
}

.success{
		display: flex;
		padding:20rpx 30rpx;
		background-color: #FFFFFF;
		.success-left{
			margin-right:30rpx;
			image{
				width:60rpx;
				height: 60rpx;
			}
		}
	}
</style>
